import { FC, useEffect, useState } from 'react';
import Virtualwaterfall from '@/components/virtualwaterfall';
import { ICardItem } from '@/components/virtualwaterfall/type';
import list from '@/components/virtualwaterfall/static';
import { debounce } from 'lodash';
import { getVideoList } from '@/apis/video';
import './index.less';

const Content: FC<{}> = () => {
  const getData = (page: number, pageSize: number) => {
    getVideoList({ page, limit: pageSize });
    return new Promise<ICardItem[]>((resolve) => {
      setTimeout(() => {
        let li = list.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
        console.log('li', li);
        resolve(li);
      }, 1000);
    });
  };

  const changeColumn = (width: number) => {
    if (width > 960) {
      return 5;
    } else if (width >= 690 && width < 960) {
      return 4;
    } else if (width >= 500 && width < 690) {
      return 3;
    } else {
      return 2;
    }
  };
  let columnInitValue = changeColumn(window.innerWidth);
  const [column, setColumn] = useState(columnInitValue);
  useEffect(() => {
    let cb = debounce(() => {
      setColumn(changeColumn(window.innerWidth));
    }, 300);
    window.addEventListener('resize', cb);
    return () => {
      window.removeEventListener('resize', cb);
    };
  }, []);
  return (
    <div style={{ backgroundColor: '#1d1f22' }} className="content-view w-full h-full flex justify-center items-center">
      <div className="container">
        <Virtualwaterfall request={getData} gap={15} pageSize={15} column={column}></Virtualwaterfall>
      </div>
    </div>
  );
};
export default Content;
